<template>
  <el-card class="mt15 mb15">
    <div class="search-filter">
      <el-row :gutter="20">
        <el-col :span="6">
          <sitem label="会议室id：">
            <el-input slot="item" v-model="listQuerytrue.huaweId2" placeholder="请输入会议室id" @input="handleFilter" />
          </sitem>
        </el-col>
        <el-col :span="6">
          <sitem label="会议室名称：">
            <el-input slot="item" v-model="listQuerytrue.roomName2" placeholder="请输入会议室名称" @input="handleFilter" />
          </sitem>
        </el-col>
        <!-- <el-col :span="5">
          <sitem label="所属企业：">
            <el-select slot="item" v-model="listQuerytrue.companyId" clearable placeholder="请选择所属企业" @change="handleFilter">
              <el-option v-for="(item,index) in companyList" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </sitem>
        </el-col> -->
        <el-col :span="6">
          <sitem label="">
            <el-button slot="item" v-waves type="primary" icon="el-icon-search" @click="handleFilter">
              搜索
            </el-button>
          </sitem>
        </el-col>
      </el-row>
    </div>
    <div class="mb15">
      <el-button type="primary" icon="el-icon-document-add" @click="drawOpen('新增')">新增</el-button>
   </div>
   <el-table
     :key="tableKey"
     ref="roomList"
     v-loading="listLoading"
     :data="list"
     fit
     stripe
     highlight-current-row
     style="width: 100%;"
   >
     <!-- @sort-change="sortChange" -->
      <el-table-column
        type="selection"
        width="50"
      />
      <el-table-column label="会议室id" prop="huaweId" align="center" width="120px" />
      <el-table-column label="会议室名称" prop="roomName" align="center" width="120px" />
      <!-- <el-table-column label="所属企业" align="center">
        <template slot-scope="{row}">
        <template v-if="row.isPlatform==0">{{row.companyId_dictText}}</template>
        <template v-if="row.isPlatform==1">平台自有</template>
        </template>
      </el-table-column> -->
      <el-table-column label="状态" prop="status_dictText" width="80px" align="center" />
      <el-table-column label="有效时间" align="center">
        <template slot-scope="{row}">
          <template v-if="row.isExpire">
            已过期
          </template>
          <template v-else>
            {{ row.effectiveBeginTime }} ~ {{ row.effectiveEndTime }}
          </template>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="160px" fixed="right" class-name="small-padding fixed-width">
        <template slot-scope="{row,index}">
          <el-button type="text" @click="drawOpen('查看',row)">
            查看
          </el-button>
          <el-button type="text" @click="drawOpen('编辑',row)">
            编辑
          </el-button>
          <!-- <el-button type="text" @click="drawOpen(row)">
            更多
          </el-button> -->
          <el-dropdown trigger="click">
            <span class="el-dropdown-link el-button--text pl10">
              <span>更多</span><i class="el-icon-caret-bottom" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item class="clearfix">
                <el-button type="text" @click="delItem(row,index)">
                  <span class="el-link el-link--danger">删除</span>
                </el-button>
              </el-dropdown-item>
              <el-dropdown-item class="clearfix" v-if="row.status == 1">
                <el-button type="text" @click="rebuild(row,index)">
                    <span class="el-link el-link--success">重新建立</span>
                </el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      prev-text="上一页"
      next-text="下一页"
      layout="prev, pager, next, jumper"
      :page.sync="listQuerytrue.pageNo"
      :limit.sync="listQuerytrue.pageSize"
      @pagination="getList"
    />

    <edit-drawer ref="editDrawer" @refresh="refresh" />

    <view-drawer ref="viewDrawer" :is-examine="isExamine" @refresh="refresh" />

  </el-card>
</template>

<script>
import { roomList, roomDel, companyList, rebuildRoom } from '@/api/conferenceRoom'
import waves from '@/directive/waves' 
import Pagination from '@/components/Pagination' 
import editDrawer from './components/editDrawer'
import viewDrawer from './components/viewDrawer'
import sitem from '@/components/searchItem'
import { mapState } from 'vuex'
import store from '@/store'
export default {
  components: { Pagination, editDrawer, viewDrawer, sitem },
  directives: { waves },
  filters: {
    stateFilter(e) {
      if (!e) {
        return '通过'
      } else if (e == 1) {
        return '未审核'
      } else {
        return '未通过'
      }
    }
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuerytrue: {
        pageNo: 1,
        pageSize: 10,
        sort: false,
        enName: '',
        enAddress: '',
        enTrade: '',
        enNature: '',
        state: '',
        actFlag: '',
        postNum: '',
        deliverNum: '',
        feedAck: '',
        interviewRate: '',
        inductionRate: ''
      },
      restaurants: [],
      state: '',
      timeout: null,
      value: '',
      isExamine: false,
      areaData: [],
      tradeData: [],
      companyList: []
    }
  },
  computed: {
    // ...mapState({
    //   enNature: state => state.app.enNature
    // })
  },
  watch: {
  },
  async created() {
    this.getList()
    var that = this;
    // companyList({}).then(response => {
    //     var companyList = response.result
    //     for (var i in companyList) {
    //       that.companyList.push({'label':companyList[i].enName, 'value':companyList[i].id});
    //     }
    // })
  },
  methods: {
    // 分页数据
    getList() {
      this.listLoading = true
      if (this.listQuerytrue.roomName2 != '' && this.listQuerytrue.roomName2 != null && this.listQuerytrue.roomName2 != undefined) {
        this.listQuerytrue.roomName = '*' + this.listQuerytrue.roomName2 + '*'
      } else {
        this.listQuerytrue.roomName = ""
      }
      if (this.listQuerytrue.huaweId2 != '' && this.listQuerytrue.huaweId2 != null && this.listQuerytrue.huaweId2 != undefined) {
        this.listQuerytrue.huaweId = '*' + this.listQuerytrue.huaweId2 + '*'
      } else {
        this.listQuerytrue.huaweId = "";
      }
      roomList(this.listQuerytrue).then(response => {
        this.list = response.result.records
        this.total = response.result.total
        this.listLoading = false
      })
    },
    // 搜索
    handleFilter() {
      this.listQuerytrue.pageNo = 1
      this.getList()
    },
    // 抽屉打开
    drawOpen(title, rowData) {
      if (title === '查看') {
        this.isExamine = false
        this.$refs.viewDrawer.show(title, rowData)
      } else if (title === '编辑') {
        this.isExamine = true
        this.$refs.viewDrawer.show(title, rowData)
      } else {
        this.$refs.editDrawer.show(title, rowData)
      }
    },
    // 禁用
    rebuild(rowData) {
      // if (rowData.banFlag) {
        this.$confirm('重新建立后，之前的会议链接将不再生效，请谨慎操作！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          rebuildRoom({ id: rowData.id }).then(response => {
            this.$message({
              type: 'success',
              message: "建立成功！"
            })
            this.refresh()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消禁用'
          })
        })
      // } else {
      //   this.enableOrDisableCompony(rowData)
      // }
    },
    enableOrDisableCompony(rowData) {
      enableOrDisable({ id: rowData.id }).then(response => {
        this.$message({
          type: 'success',
          message: !rowData.banFlag ? '已启用' : '已禁用'
        })
        this.refresh()
      })
    },
    // 删除多个
    delMultiple() {
      const selected = this.$refs['roomList'].selection
      var selected_arr = []
      selected.forEach(item => {
        selected_arr.push(item.id)
      })
      this.$confirm('删除企业将会一并将企业相关的数据一并删除，请谨慎', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delRoom(selected_arr.join(','))
        // this.list.splice(index, 1)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 删除一个
    delItem(rowData, index) {
      this.$confirm('删除会议室将会结束华为云会议室，请谨慎', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delRoom(rowData.id)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 删除方法
    delRoom(id) {
      roomDel({ id: id }).then(response => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.refresh()
      })
    },
    refresh() {
      this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
  .filter-container{
    line-height: 36px;
    font-size: 14px;
    margin-bottom: 10px;
    .filter-item{
      margin-bottom: 0;
    }
  }
</style>
